.flex-gallery {
    display: flex;
    flex-wrap: wrap;
	justify-content: start;
    gap: 32px;
    padding: 20px 0px;
}
img.attachment-thumbnail {
    max-width: 315px; 
    max-height: 200px;
}

.footer-coordinate-title{
    font-family: "Crimson Pro", Helvetica;
    margin:0;
}

.vdt-footer {
    background-color: var(--bg);
    padding: 20px 100px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
}


.footer-icon
{
height: 20px;

}
.vdt-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}


/*
.vdt-blanc:hover, .vdt-noir:hover
{
transform:scale(1.05);
}*/

input[type="button"].vdt-noir,
button.btn.vdt-noir, .vdt-noir {
  background-color: red;
}

.vdt-actionmenu-flex div div.form-action-container-left {
    display: flex;
    column-gap: 15px;
    flex-direction: row-reverse;

}


.vdt-blanc:hover, .vdt-blanc:focus, .vdt-blanc.focus {
    color: #000;
    text-decoration: none;
}


.vdt-blanc {
    display: block;
    color: #000;
    padding: 0 15px;
    font-family: "Rubik", Helvetica;
    font-weight: 500;
    background-color: white;
    font-size: 17px;
    letter-spacing: -0.3px;
    line-height: 45px;
    white-space: nowrap;
    font-style: normal;
    border-radius: 10px;
    height: 45px;
    text-align: center;
    border-radius: var(--br-xs);
    border: 1px solid var(--color-gray-100);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.vdt-fullwith-center-sidebar {
    width: 100%;
    align-self: stretch;
 
}

.content, .main-content, .side-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}


@media screen and (max-width: 768px) { 
.content, .main-content, .side-content {
    justify-content: left;
}
}

.vdt-main-content {
    max-width: 1200px;
    flex-direction: row;
    box-sizing: border-box;
}

/*Gérer le titre de section comme le titre d'onglet*/
legend.section-title h3
{
    font-size: 35px;
    border-bottom: none;
    font-family: "Crimson Pro", Helvetica;
}

h2.tab-title {
    font-family: "Crimson Pro", Helvetica;
    font-weight: 400;
    font-size: 18px;
    border: none;
    /* margin-bottom: 50px;
    margin-top: 50px; */
}
.section .info label {
    padding-bottom: 0px;
    line-height: 1.5;
}
div.vdt-email {
    width: 100%;    
}

h1.page-title {
    font-family: "Crimson Pro", Helvetica;
    font-weight: 400;
    font-size: 56px;
    border: none;
    margin-bottom: 40px;
    margin-top: 50px;
    line-height: 1;
    text-transform: none;
}

.form-control {
    align-self: stretch;
    font-size: 17px;
    line-height: 24px;
    text-align: left;   
    border: 1px solid #1D181480;
    border-radius: 6px;
    color:#000000CC ;
}

td.clearfix.cell.textarea.form-control-cell {
    padding-bottom: 0px;
}
h1.modal-title {
    padding: 25px;
    padding-right: 135px;
}

h2.tab-title {
    font-size: 17px;
    font-family: 'Rubik';
    font-weight: bold;
}


select.form-control input.form-control{   
    border-radius: 12px;
    padding: 8px;
    border: 2px solid #ccc;
    height: 50px;
    font-size: 18px;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto;
}
.picker-switch button,.next button,.prev button{
    color:#333;
}
.msos-quick-delete:hover {
    background: none !important;
}
.msos-option-selected:hover {
    background: none !important;
  }
  .checkbox-cell > div.info > label {
    margin-top: 0px;
    }
.input-append.input-group.datetimepicker{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
}
input#trb_att_datedelevenement_datepicker_description {
    border-radius: 6px;
}
h3.info.form-subgrid-heading {
    border: none;
}

.info:has(.field-label)
{    
    width: 100%;
    
    padding-top: 5px;
    /* border-top: 1px solid var(--color-gray-100); */
    box-sizing: border-box;    
    font-family: var(--desktop-bouton);
  /*  line-height: 13px;font-weight: 500;*/
    
    border-bottom: none;
    color: var(--noir);
    max-width: 100%;
}
.col-md-4.columnBlockLayout .content-box p {
    font-size: 17px;
    line-height:18px

}
#gs_location_search_label{
    line-height: 20px;
}
a.link-noir {
    color: var(--Noir, #1D1814);
    font-family: Rubik;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.content-box h3 {
    /* font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333; */
    font-family: "Crimson Pro";
      font-size: 30px  !important;
      font-style: normal;
      font-weight: 500 !important;
      line-height: 30px;
      letter-spacing: -0.2px;
      border: 0;
  }
.status-content {
    margin-bottom: 12px;
}
/*
.content-padding
{
    padding: 10px 0px 0px 0px;
    width: 95%;
}*/


.commentaire-citoyen, div.info {
    border-top: solid  1px var(--color-gray-100);;
}
/*
.commentaire-citoyen:not(:last-child) {
    margin-bottom: 25px;
}*/

.commentaire-citoyen:last-of-type {
    border-bottom: solid  1px var(--color-gray-100);;
}

.header_attachment_label {
    padding-top: 20px;
}

.modal-footer {
    display: flex;
    margin-left: 15px;
}


.modal-form.vdt-modal-long .modal-body iframe {
    height: 525px;
}
.modal-form .modal-body iframe[src*="refrel=Incident_Task"] {
    height: 250px;
}

.modal-form .modal-body iframe[src*="refrel=Incident_Task"].vdt-validation-error {
    height: 325px;
}

.modal-form .modal-body iframe[src*="refrel=gs_contact_gs_relation_ContactId"] {
    height: 410px;
}

.modal-form .modal-body iframe[src*="refrel=gs_contact_gs_relation_ContactId"].vdt-validation-error {
    height: 485px;
}


.modal-form .modal-body iframe[src*="refrel=incident_adx_portalcomments"] {
    height: 515px;
}

.modal-form .modal-body iframe[src*="refrel=incident_adx_portalcomments"].vdt-validation-error {
    height: 650px;
}

div[class*="test"]{
    background: #ffff00;
  }
.modal-form.vdt-modal-medium .modal-body iframe {
    height: 400px;
}

.modal-form.vdt-modal-short .modal-body iframe {
    height: 350px;
}
/*
.modal-lg.modal-dialog {
    margin-top: 150px;
}*/
 
div.instructions:has(> div.consent-instructions-box) 
{
    margin-bottom: 30px;
}

div.consent-instructions-box {
    border-radius: 10px;
}
 .modal-body {
        margin-left: 20px;
    }
.modal-content {
    border-radius: 15px;
   
}


button.form-close::before {
    content: "Fermer";
}
button.form-close > span {
    display: none;
}
button.form-close {
    margin: 5px;    
    padding: 15px 20px;
    border-radius: 10px;
    background:  var(--color-gray-100);
    color: white;
}

/*
input.submit-btn
{
        margin: 5px;
        padding: 15px 20px;
        border-radius: 10px;
        font-size: 21px;
        font-weight: 700;  
}*/




/*sert au modal de commentaire dans requete*/
table.section[data-name="vdt-note-section"] label,
table.section[data-name="ConsentFormToShow"] label {
    border: none;
}


/*Section statut dans incident*/
h1.statut-title
{
font-size:26px ;
border:none;
    line-height: 30px ;
    font-weight: 500;
    font-family:"Crimson Pro"
	}
.statut-name
{
font-size:22px ;
    font-weight: 500;
	}

/*uniformisation des borders des imputs*/
.input.form-control{
        border: 1px solid #1D181480;
        border-radius: 6px;
    }
 
/*Centrage du logo calendrier de la date de naissance dans profil*/
.input-group-addon{
        display: flex;
        justify-content: center;
        width: auto;
        border: none;
    }
/*le calendrier apparait au clic*/
    .input-group{
        overflow: visible;
    }

    .input[type="button"], button{
        color: black;

    }
    div.vdt-revoke {
        cursor: pointer;
        font-weight: bold;
    }
    
/* responsive footer mobile*/

@media screen and (max-width: 768px) { 

    .footer-container{
        flex-direction: column;
        align-items: center;
    }
    .vdt-footer{
        padding: 50px 20px 100px 20px;
    }
    .footer-right{
        display: none;
    }  
    .footer-coordinate-title{
        font-size: 30px;
        margin-bottom: 20px;
    }
    .footer-left p{
        margin: 20px 0;
    }  
    .footer-bo{
        display: flex;
        flex-direction: column; 
    }
    .footer-droits, .footer-link{
        padding: 20px 0px;
   }
    .footer-droits{
        font-size: 12px;
   }
    .footer-link{
        font-size: 14px;
   }
}
    .navbar {
        min-height: 55px; 
    }

/*header */
    .vdt-badge-header-icon {
        width: 18px;  
        height: 18px; 
    }





.fichier-joint{
display: flex;

}

.vdt-pj-downloadicon 
{
max-width: 50px;

}

 .day{
    padding: 0px !important;
}
.day button{
    margin: 0px;
} 
.custom-line {
    border-top: 1px solid #ccc; /* Couleur et style de la ligne */
    margin: 70px 0; /* Espacement au-dessus et en dessous */
    width: 100%; /* La ligne prend toute la largeur */
}
#newSubDiv ul{
list-style-type: none;
padding: 0;
margin: 0;
}
div#ValidationSummaryEntityFormView {
        padding-top: 0px;
        margin-right: 25px;
        border-radius: 10px;
        font-size: 15px;    
}

h2.validation-header {
    font-size: 26px;
}

.details-link {
    position: relative; /* Nécessaire pour positionner l'infobulle */
}

.tooltip-text {
    visibility: hidden; /* Masque l'infobulle par défaut */
    opacity: 0; /* Rendre transparent */
    position: absolute;
    top: -30px; /* Positionner l'infobulle au-dessus */
    left: 50%;
    transform: translateX(-90%);
    background-color: #333; /* Fond sombre */
    color: #fff; /* Texte blanc */
    padding: 5px 10px; /* Espacement interne */
    font-size: 12px;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.2s ease-in-out; /* Animation */
}

.details-link:hover .tooltip-text {
    visibility: visible; /* Affiche l'infobulle */
    opacity: 1; /* Rend opaque */
}

.msos-label {
    position: relative;
    overflow: hidden;
    line-height: 24px;
    text-align: left;
    font-size: 17px;
}

.modal-lg.modal-dialog .modal-body .tab-title {
    color: red; /* Change la couleur du texte */
    font-size: 20px; /* Change la taille du texte */
    font-weight: bold; /* Met le texte en gras */
}
#raisonSelection {
    font-family: "Crimson Pro", Helvetica;
    font-weight: 400;
    font-size: 25px !important;
    border: none;
}
#info {
    border-top: 1px solid var(--color-gray-100);
}

.breadcrumbs-holder {
    border-top:  var(--color-gray-100) 1px solid;    
    padding-top: 10px;
    margin-right: 40px;
}

ul.breadcrumb  {
    margin-top: 20px;
}

ul.breadcrumb > li > a {
    font-weight: bold; 
    text-decoration: underline;
}


.vdt-text-wrapped {
    white-space: "pre-wrap"; 
}

.vdt-italic {
    font-style: italic; 
}
h3.vdt-noborder {
    border: none;
}


.vdt-text-danger {
    color: red;
    font-weight: bold;
}


/*
vdt-top-fullwidth est utilisé dans le formulaire d'action avec les bouton complément & annulation d'une requête.
il y a une structure 50 / 50 pour les bouton a gauche ou a droite, ça ne sert pas ici. forcer 100% de largeur et s'alligner sur la colonne.
affecte uniquement les div d'action ayant les classe
*/
div.vdt-top-fullwidth > div {
    width: 100%;
  }

  div.vdt-top-fullwidth > div > .form-action-container-left {
    width: 100%;
  }



  div.ck-content{
font-weight:normal
  }

  .vdt-hidden{
    display: none;
  }